<script setup lang="ts">
import type { PropType } from 'vue'
import type { Board } from '../types'

const props = defineProps({
  board: {
    type: Array as PropType<Board>,
    required: true,
  },
})
</script>

<template>
  <div class="board">
    <div v-for="(row, r) in board" :key="r" class="row">
      <div
        v-for="(cell, c) in row"
        :key="c"
        class="cell"
        :class="{ filled: cell === 1 }"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
$primary: #29b6f6;
$bg: #000;
$cell-border: #333;

.board {
  display: grid;
  grid-template-rows: repeat(20, 1fr);
  aspect-ratio: 10 / 20;
  width: 100%;
  background: $bg;
  border-radius: 10px;
  overflow: hidden;
  max-height: 380px;

  .row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
  }

  .cell {
    border: 1px solid $cell-border;
    transition: background 0.2s;
    background: transparent;

    &.filled {
      background: $primary;
      box-shadow:
        0 0 5px $primary,
        inset 0 0 10px lighten($primary, 20%);
    }
  }
}
</style>
